<template>
	<gui-page :fullPage="true" :customHeader="true" :isLoading="pageLoading" ref="guiPage">
		<view slot="gHeader">
			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<view class="gui-flex1 gui-text-center">
					<gui-search background="#f3f3f4" placeholder="客户姓名" :kwd="searchQuery.name" @inputting="inputting" @confirm="confirm" @clear="clearSearch"></gui-search>
				</view>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view class="f28" style="width:138rpx;text-align: center;color: #0e6eff;" @tap="searchFun">
					搜索
				</view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>

			<!-- 下面注释的代码演示了只有返回按钮的情况  -->
			<!-- view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding" -->
			<!-- 返回按钮 -->
			<!-- gui-header-leading :onlyBack="true"></gui-header-leading -->
			<!-- 导航文本此处也可以是其他自定义内容 -->
			<!--text class="gui-h4 gui-ellipsis gui-text-center gui-header-content gui-primary-color">页面标题</text -->
			<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			<!-- /view-->
		</view>
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns" style="background-color:#F8F8F8;">
			<!-- 分类导航 -->
			<view class="header gui-border-b gui-border-box gui-flex gui-columns gui-justify-content-center"
				id="myheader">
				<gui-switch-navigation :size="180" :currentIndex="currentIndex" textAlign="center" :isCenter="true"
					activeDirection="center" activeLineBg="linear-gradient(to right, #008AFF,#008AFF)" :items="tabs"
					@change="navchange"></gui-switch-navigation>
			</view>
			<swiper :current="currentIndex" @change="swiperChange" :style="{height:mainHeight+'px', width:'750rpx'}">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item v-for="(items, orderIndex) in orders" :key="orderIndex">
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :scroll-y="true" :scroll-top="scrollTops[currentIndex]"
						:style="{height:mainHeight+'px'}" @touchstart="touchstart" @touchmove="touchmove"
						@touchend="touchend" @scrolltolower="loadmorefun" @scroll="scroll">
						<!-- 刷新组件 -->
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<!-- 数据展示区域 -->
						<view class="un_connection" @tap="$u.to(`/pages/client/noContact`)" v-if="overClient == 1">
							<view class="left gui-flex gui-align-items-center">
								<image src="../../static/image/danager.png" mode="widthFix"></image>
								<text class="f22">已有多个客户超过7天以上未联系</text>
							</view>
							<view class="right">
								查看>
							</view>
						</view>
						<gui-empty v-if="items.length <= 0">
							<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image class="gui-empty-img" src="@/static/noImg.png"></image>
							</view>
							<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top"
								style="color:#9DABFF;">暂无数据</text>
						</gui-empty>
						<view class="client_item" v-if="items != null" v-for="(order, oIndex) in items" :key="oIndex"
							@click="jumpDetail(order, oIndex)">
							<view class="row gui-flex gui-align-items-center gui-space-between">
								<view class="user_info gui-flex gui-align-items-center">
									<!-- <image class="tx_img" src="../../static/logo.png" mode="aspectFit"></image> -->
									<gui-image :src="order.avatar" :width="98" :height="98" borderRadius="50%"
										mode="aspectFit"></gui-image>
									<view class="info_row">
										<view class="name gui-flex gui-align-items-center">
											<text class="f26">{{order.name}}</text>
											<view class="sgin">{{$u.stateFormData(order.state)}}</view>
											<view class="sgin dannger" v-if="order.overDay">
												超过{{$u.overDayFormData(order.overDay)}}天未联系</view>
										</view>
										<view class="rate">
											<uni-rate size="12" :readonly="true" :value="order.level" />
										</view>
									</view>
								</view>
								<view class="phone">
									<text class="f22 c333" @tap.stop="$u.makePhone(order.phone)">{{order.phone}}</text>
									<image class="phone_call ml_10" src="../../static/image/phone_call.png"
										mode="widthFix"></image>
								</view>
							</view>
							<view class="desc_row gui-flex">
								<view class="item right_line">
									<view class="status">
										客户状态
									</view>
									<view class="val">
										{{$u.typeFormData(order.type)}}
									</view>
								</view>
								<view class="item right_line">
									<view class="status">
										跟进次数
									</view>
									<view class="val">
										{{order.followCount}}
									</view>
								</view>
								<view class="item right_line">
									<view class="status">
										最近联系
									</view>
									<view class="val">
										{{order.lastTime || '/'}}
									</view>
								</view>
								<view class="item" v-if="order.type == 3">
									<view class="status">
										完成转化
									</view>
									<view class="val">
										{{order.finishTime || '/'}}
									</view>
								</view>
								<view class="item" v-else>
									<view class="status">
										已领取天数
									</view>
									<view class="val">
										{{order.day || '/'}}
									</view>
								</view>
							</view>
						</view>
						<!-- 加载组件 -->
						<gui-loadmore ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gui-page>
</template>
<script>
	var graceJs = require('@/GraceUI5/js/grace.js');
	// 模拟 api 请求数据，格式见 article.js
	var artciles = require('@/GraceUI5/demoData/article.js');
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState(['overClient', 'isReloadWin'])
		},
		data() {
			return {
				searchQuery: {
					name: ''
				},
				// 全屏 loading
				pageLoading: true,
				// 选项卡标签
				tabs: [],
				// 选中选项的 索引
				currentIndex: 0,
				// 核心区域高度 
				mainHeight: 200,
				// 订单信息保存数组
				orders: [],
				// 每个选项卡对应的分页
				pages: [],
				pageSize: 10,
				// 每个选项卡内部的滚动区域滚动值
				scrollTops: [],
				// 滚动延迟
				scrollTimer: null,
				// 加载更多延迟
				loadMoreTimer: null,
				// api 加载状态记录
				apiLoadStatus: []
			}
		},
		onShow() {
			if (this.isReloadWin) {// 是否需要刷新
				this.reload2();
			}
		},
		onLoad: function() {
			// 01. 获取页面主体高度
			graceJs.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 主体高度 = 页面高度 - 自定义区域高度
					graceJs.select('#myheader', (e2) => {
						// 如果自定义区域有 margin 尺寸获取不到请加上这个值，可以利用 uni.upx2px() 转换
						this.mainHeight = e.height - e2.height;
						// 模拟 api 加载新闻分类
						// 实际开发时此处改成 api 请求即可
						setTimeout(() => {
							this.tabs = [{
								id: 0,
								name: '未联系'
							}, {
								id: 1,
								name: '跟进中'
							}, {
								id: 2,
								name: '已完成'
							}, {
								id: 3,
								name: '全部'
							}];
							// 初始化新闻列表数组 元素数量与分类匹配
							for (var i = 0; i < this.tabs.length; i++) {
								this.orders.push([]);
								this.pages.push(1);
								this.scrollTops.push(0);
								this.apiLoadStatus.push(false);
							}
							// 第一次加载数据
							this.getOrders();
						}, 500);
					});
				});
			});
			uni.$off('updateList')
			uni.$on('updateList', (oIndex) => {
				this.orders[this.currentIndex].splice(oIndex, 1)
			})
		},
		watch: {
			currentIndex: function(nVal, oldVal) {
				if (this.orders[nVal] == null) {
					return;
				}
				if (this.orders[nVal].length < 1) {
					this.getOrders();
				}
			}
		},
		methods: {
			...mapActions(['upateOverClient', 'updateReload']),
			// 输入
			inputting(e) {
				console.log(e);
				this.searchQuery.name = e;
			},
			clearSearch() {
				this.searchQuery.name = '';
				this.searchFun();
			},
			// 搜索
			confirm(e) {
				console.log(e);
				this.searchQuery.name = e;
				this.searchFun();
			},
			// 搜索事件
			searchFun() {
				this.pages[this.currentIndex] = 1;
				this.$refs.loadmorecom[this.currentIndex].stoploadmore();
				this.getOrders();
			},
			jumpDetail(item, oIndex) {
				this.$u.to(`/pages/client/details?id=${item.id}&oIndex=${oIndex}`)
			},
			// 分类切换
			navchange: function(e) {
				this.currentIndex = e;
			},
			// 轮播切换
			swiperChange: function(e) {
				this.currentIndex = e.detail.current;
			},
			// 滚动区域滚动
			scroll: function(e) {
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.scrollTops.splice(this.currentIndex, 1, e.detail.scrollTop);
				}, 100);
			},
			// 下拉刷新相关事件绑定
			touchstart: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchstart(e);
			},
			touchmove: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchmove(e);
			},
			touchend: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchend(e);
			},
			// 刷新事件
			reload: function() {
				this.pages[this.currentIndex] = 1;
				this.$refs.loadmorecom[this.currentIndex].stoploadmore();
				this.updateReload(false);
				this.getOrders(1);
			},
			// 刷新事件
			reload2: function() {
				this.pages[this.currentIndex] = 1;
				this.$refs.loadmorecom[this.currentIndex].stoploadmore();
				this.updateReload(false);
				this.getOrders();
			},
			// 加载更多事件
			loadmorefun: function() {
				var currentIndex = this.currentIndex;
				if (this.apiLoadStatus[currentIndex]) {
					return;
				}
				// 获取加载组件状态看一下是否还能继续加载
				if (this.$refs.loadmorecom[currentIndex].loadMoreStatus != 0) {
					return;
				}
				// 保证触底只执行一次加载
				if (this.loadMoreTimer != null) {
					clearTimeout(this.loadMoreTimer);
				}
				this.loadMoreTimer = setTimeout(() => {
					this.$refs.loadmorecom[currentIndex].loading();
					// 此处开启加载动画执行加载数据的函数
					this.getOrders();
				}, 80);
			},
			// 新闻数据读取
			getOrders: function(isReload) {
				// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
				var currentIndex = this.currentIndex;
				console.log(this.pages[currentIndex]);
				// 更新 api 加载状态
				this.apiLoadStatus.splice(currentIndex, 1, true);
				if (this.pages[currentIndex] == 1 && !isReload) {
					this.pageLoading = true;
				}
				// 当前正在展示的 选项index 为 this.currentIndex
				// 那么分类 id 应该为 this.tabs[this.currentIndex].id
				console.log('类型 : ' + this.tabs[currentIndex].name + ' 第' + this.pages[currentIndex] + '页');
				this.$api.getMyClient({
					pageNum: this.pages[currentIndex],
					pageSize: this.pageSize,
					type: this.tabs[currentIndex].id,
					...this.searchQuery
				}).then(res => {
					if (res.code == 200) {
						let total = Math.ceil(res.data.total / this.pageSize);
						this.upateOverClient(res.data.overClient)
						// this.upateOverClient(1)
						// 第一页
						if (this.pages[currentIndex] == 1) {
							this.orders.splice(currentIndex, 1, res.data.noContact);
						} else {
							this.orders[currentIndex] = this.orders[currentIndex].concat(res.data.noContact);
							this.$refs.loadmorecom[currentIndex].stoploadmore();
							if (this.pages[currentIndex] >= total) {
								this.$refs.loadmorecom[currentIndex].nomore();
							}
						}
					}
					// 刷新
					if (isReload) {
						this.$refs.loadmorecom[currentIndex].stoploadmore();
						this.$refs.refreshcom[currentIndex].endReload();
					}
					this.pages[currentIndex]++;
					// 更新 api 加载状态
					this.apiLoadStatus.splice(currentIndex, 1, false);
					// this.orders[currentIndex] = res.data.noContact;
				}).finally(e => {
					this.pageLoading = false;
				})
			},
			// 删除订单
			// 参数 : orderIndex,   oIndex,  orderNumber
			//       数组第一层索引   订单索引     订单号码
			removeorder: function(orderIndex, oIndex, orderNumber) {
				console.log(orderIndex, oIndex);
				uni.showModal({
					title: "确定要删除吗？",
					complete: (e) => {
						if (e.confirm) {
							// 此处连接可以后端api 删除订单
							// 删除前端数据
							this.orders[orderIndex].splice(oIndex, 1);
							this.orders.splice(oIndex, 1, this.orders[orderIndex]);
						}
					}
				})
			}
		}
	}
</script>
<style>
	.header {
		padding: 15rpx 30rpx;
		height: 100rpx;
		background-color: #fff;
	}
</style>